<template>
  <div>
    <el-collapse v-model="collapseActive">
      <el-collapse-item title="房间相关" name="1">
        <div class="m-dataList">
          <el-table
            :data="dataListB"
            ref="dataListA"
            :max-height="500"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="房间">
            </el-table-column>
            <el-table-column
              prop="date"
              label="课程名称">
              <template slot-scope="scope">
                <a href="javascript:void(0)" @click="details.show = true">{{scope.row.aaa}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="课程日期">
            </el-table-column>
            <el-table-column
              prop="date"
              label="直播时段">
            </el-table-column>
            <el-table-column
              prop="name"
              label="@分析师条数"
              width="120">
            </el-table-column>
            <el-table-column
              prop="province"
              label="@管理员条数"
              width="120">
            </el-table-column>
            <el-table-column
              prop="city"
              label="私聊助理条数"
              width="120">
            </el-table-column>
            <el-table-column
              prop="address"
              label="首次登入时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="最后登入时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="首次发言时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="最后发言时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="禁言次数"
              width="150">
            </el-table-column>
          </el-table>
        </div>
        <div class="m-pagination">
          <el-pagination
            @size-change="(size)=>{handleSizeChange(size,'A')}"
            @current-change="(index)=>{handleCurrentChange(index,'A')}"
            :page-sizes=paginationA.pageSizeList
            :current-page=paginationA.pageNo
            :page-size=paginationA.pageSize
            layout="total, sizes, prev, pager, next"
            :total=paginationA.total>
          </el-pagination>
        </div>
      </el-collapse-item>
      <el-collapse-item title="登录相关" name="2">
        <div class="m-dataList">
          <el-table
            :data="dataListB"
            ref="dataListD"
            :max-height="500"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="name"
              label="手机号码"
              width="120">
            </el-table-column>
            <el-table-column
              prop="province"
              label="登入次数"
              width="120">
            </el-table-column>
          </el-table>
        </div>
        <div class="m-pagination">
          <el-pagination
            @size-change="(size)=>{handleSizeChange(size,'B')}"
            @current-change="(index)=>{handleCurrentChange(index,'B')}"
            :page-sizes=paginationB.pageSizeList
            :current-page=paginationB.pageNo
            :page-size=paginationB.pageSize
            layout="total, sizes, prev, pager, next"
            :total=paginationB.total>
          </el-pagination>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog title="房间详情" :visible.sync="details.show" width="700px" class="m-dialog"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row class="m-roomDetials">
        <el-col :span='24'>房间名称：</el-col>
        <el-col :span='24'>课程详情：</el-col>

        <el-col :span='8'>课程日期：</el-col>
        <el-col :span='16'>课程名称：</el-col>

        <el-col :span='8'>直播时段：</el-col>
        <el-col :span='16'>直播类型：</el-col>

        <el-col :span='8'>分析师：</el-col>
        <el-col :span='8'>管理员：</el-col>
        <el-col :span='8'>老师助理：</el-col>

        <el-col :span='8'>最高在线人数：</el-col>
        <el-col :span='8'>互动总条数：</el-col>
        <el-col :span='8'>互动总人数：</el-col>

        <el-col :span='8'>@分析师条数：</el-col>
        <el-col :span='8'>@管理员条数：</el-col>
        <el-col :span='8'>私聊助理条数：</el-col>

        <el-col :span='8'>@分析师人数：</el-col>
        <el-col :span='8'>@管理员人数：</el-col>
        <el-col :span='8'>私聊助理人数：</el-col>

        <el-col :span='8'>分析师发言条数：</el-col>
        <el-col :span='8'>@管理员发言条数：</el-col>
        <el-col :span='8'>私聊助理发言条数：</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="details.show = false" type="primary">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  export default {
    name: 'TheStatisticsLive',
    data () {
      return {
        collapseActive:['1','2'],
        paginationA: Utils.commonPagination(),
        dataListA: [],

        paginationB: Utils.commonPagination(),
        dataListB: [],

        details:{
            show:false,
        }
      }
    },
    methods: {
      handleSizeChange(size) {},
      handleCurrentChange(index) {}
    }
  }
</script>

<style scoped lang="scss">
</style>
